<template>
	<view class="wrap">
		<view class="wrapTitle">
			<image class="wrapTitleImg" :src="item.headImage"></image>
			<view class="wrapTitleInfo">
				<view class="wrapTitleInfoName">{{userInfo.wechatName}}<text class="wrapTitleInfoPhone">{{userInfo.phone}}</text></view>
				<view class="wrapTitleInfodepartment">华润银行<text>|</text>{{userInfo.deptName}}</view>
			</view>
		</view>
		<view class="wrapContent">
			<view class="wrapContentTop">
				<view>
					<view class="wrapContentTopNum">{{data.height}}</view>
					<view class="wrapContentTopDw">身高(cm)</view>
				</view>
				<view>
					<view class="wrapContentTopNum">{{data.weight}}</view>
					<view class="wrapContentTopDw">体重(kg)</view>
				</view>
				<view style="position: relative;">
					<view class="wrapContentTopNum">{{data.bmi}}</view>
					<view class="wrapContentTopDw">BMI</view>
					<view class="wrapContentTopTips">正常</view>
				</view>
			</view>
			<view class="wrapContentList">
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">领围(cm)</view>
						<view class="wrapContentItemLNum">{{data.neck}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">肩宽(cm)</view>
						<view class="wrapContentItemLNum">{{data.shoulder}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">胸围(cm)</view>
						<view class="wrapContentItemLNum">{{data.chest}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">腰围(cm)</view>
						<view class="wrapContentItemLNum">{{data.waistline}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">臀围(cm)</view>
						<view class="wrapContentItemLNum">{{data.hip}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">臂长(cm)</view>
						<view class="wrapContentItemLNum">{{data.arm}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">手肘围(cm)</view>
						<view class="wrapContentItemLNum">{{data.forearm}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">腿长(cm)</view>
						<view class="wrapContentItemLNum">{{data.leg}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">腿围(cm)</view>
						<view class="wrapContentItemLNum">{{data.thigh}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">膝盖围(cm)</view>
						<view class="wrapContentItemLNum">{{data.knee}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">肩型(cm)</view>
						<view class="wrapContentItemLNum1">{{data.shoulderType}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">臀型(cm)</view>
						<view class="wrapContentItemLNum1">{{data.buttocksType}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">脚长(cm)</view>
						<view class="wrapContentItemLNum">{{data.feetLong}}</view>
					</view>
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">脚宽(cm)</view>
						<view class="wrapContentItemLNum">{{data.feetWide}}</view>
					</view>
				</view>
				<view class="wrapContentItem">
					<view class="wrapContentItemL">
						<view class="wrapContentItemLDw">脚围(cm)</view>
						<view class="wrapContentItemLNum">{{data.feetCir}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="wrapBottom">
			<view class="wrapBottomItem">
				<image src="../../../static/images/img/Group 278@2x.png" class="wrapBottomItemImg"></image>
				<view class="wrapBottomItemText">
					<view style="font-size: 40upx;">{{data.coat}}</view>
					<view style="font-size: 24upx;margin-top: 8upx;">上衣型号</view>
				</view>
			</view>
			<view class="wrapBottomItem">
				<image src="../../../static/images/img/Group 279@2x.png" class="wrapBottomItemImg"></image>
				<view class="wrapBottomItemText">
					<view style="font-size: 40upx;">{{data.pants}}</view>
					<view style="font-size: 24upx;margin-top: 8upx;">下衣型号</view>
				</view>
			</view>
			<view class="wrapBottomItem">
				<image src="../../../static/images/img/Group 280@2x.png" class="wrapBottomItemImg"></image>
				<view class="wrapBottomItemText">
					<view style="font-size: 40upx;">{{data.shoes}}</view>
					<view style="font-size: 24upx;margin-top: 8upx;">鞋子尺码</view>
				</view>
			</view>
		</view>
		<view class="wrapBtn" @click="infoConfirm" v-if="id">确认量体数据</view>
	</view>
</template>

<script>
	import api from './config/api'
	import {sendReq} from '../../../components/canvasShow/config/mixin/sendReqMixin.js'
	export default{
		data(){
			return{
				id:'',//id
				data:{},//数据集合
				userInfo:{},
				item:{}
			}
		},
		onLoad(options) {
			console.log(options)
			this.userInfo = uni.getStorageSync('storage_key');
			this.item = uni.getStorageSync('storage_userInfo');
			if(options.id){
				this.id = options.id
				this.getInfo()
			}else{
				this.getInfoUser()
			}
		},
		methods:{
			getInfo(){
				var _this = this
				var apiUrl = api.info+'?id='+_this.id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					this.data = res.data
					// console.log(JSON.parse(res.data.json))
				})
			},
			getInfoUser(){
				var _this = this
				var apiUrl = api.infoUser
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					this.data = res.data
					// console.log(JSON.parse(res.data.json))
				})
			},
			infoConfirm(){
				var _this = this
				var apiUrl = api.infoConfirm+'?id='+_this.id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					console.log(res)
					if(res.code=='200'){
						uni.navigateBack({})
					}
					// console.log(JSON.parse(res.data.json))
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		background-color: #F6F6F6;
		padding: 24upx 0;
		padding-bottom: 30upx;

		.wrapTitle {
			width: 690upx;
			margin: 0 auto;
			border-radius: 16upx;
			background-color: #fff;
			height: 168upx;
			display: flex;
			align-items: center;

			.wrapTitleImg {
				width: 120upx;
				height: 120upx;
				margin-left: 24upx;
				border-radius: 60upx;
			}

			.wrapTitleInfo {
				margin-left: 24upx;

				.wrapTitleInfoName {
					font-size: 36upx;
					color: #333;
					font-weight: bold;

					.wrapTitleInfoPhone {
						font-size: 28upx;
						font-weight: 400;
						margin-left: 16upx;
					}
				}

				.wrapTitleInfodepartment {
					font-size: 24upx;
					color: #999;

					text {
						margin: 0 5upx;
					}
				}
			}
		}

		.wrapContent {
			width: 690upx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 16upx;
			margin-top: 24upx;
			box-sizing: border-box;

			.wrapContentTop {
				width: 100%;
				border-bottom: 1px solid #DCDCDC;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 196upx;

				.wrapContentTopNum {
					font-size: 64upx;
					color: #333;
					font-weight: 500;
					text-align: center;
				}

				.wrapContentTopDw {
					font-size: 24upx;
					color: #333;
					text-align: center;
				}
				.wrapContentTopTips{
					position: absolute;
					right: -35upx;
					top: -20upx;
					color: #2BB5AF;
					font-size: 24upx;
				}
			}
			.wrapContentList{
				box-sizing: border-box;
				padding: 0 24upx;
			}
			.wrapContentItem {
				width: 100%;
				height: 92upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #DCDCDC;
				display: flex;
				.wrapContentItemL{
					width: 275upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.wrapContentItemLDw{
						font-size: 28upx;
						color: #333;
						// margin-right: 60upx;
					}
					.wrapContentItemLNum{
						font-size: 40upx;
						color: #333;
					}
					.wrapContentItemLNum1{
						height: 40upx;
						background-color: #2BB5AF;
						color: #fff;
						font-size: 24upx;
						border-radius: 8upx;
						padding:0 8upx;
						line-height: 40upx;
					}
				}
			}
		}
		.wrapBottom{
			width: 690upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 40upx;
			.wrapBottomItem{
				width: 216upx;
				height: 236upx;
				background-color: #FFF4D7;
				border-radius: 16upx;
				box-sizing: border-box;
				padding-top: 24upx;
				.wrapBottomItemImg{
					width: 100upx;
					height: 100upx;
					display: block;
					margin: 0 auto;
				}
				.wrapBottomItemText{
					color: #9E5F00;
					text-align: center;
				}
			}
		}
		.wrapBtn{
			width: 702upx;
			height: 88upx;
			background-color: #EFB257;
			border-radius: 100upx;
			text-align: center;
			line-height: 88upx;
			color: #fff;
			margin: 84upx auto 0 auto;
		}
	}
</style>
